<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>图标字体</title>
    <link rel="stylesheet" href="./fa/css/all.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        li::before{
            /* 
                通过伪元素来设置图标字体
                    1.找到要设置图标的元素，通过before或after选中
                    2.在content中设置字体的编码
                    3.设置字体的样式
                        fab
                        font-family:'Font Awesome 5 Brands';

                        fas
                        font-family:'Font Awesome 5 Free';
                        font-weight:900;
            */
            content: '\f530';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            margin: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>

    <!-- 
        通过实体来使用图标字体:
            &#x图标的编码
     -->
     <span class="fas" style="font-size: 20px; color: darkblue; padding-left: 20px; margin-top: 30px;">&#xf02b</span>
</body>
</html>